<template>
  <div>
    <div class="back" @click="tologin">
      <i class="el-icon-close"></i>我的钱包
    </div>
    <div class="money">
      ￥<span>{{money}}</span>
      <p>余额</p>
    </div>
    <div class="detail">
      <ul>
        <li @click="toDeals">
          <i class="el-icon-tickets"></i>
          <span>交易明细</span>
          <i class="el-icon-arrow-right" ></i>
        </li>
        <li>
          <i class="el-icon-setting"></i>
          <span>交易设置</span>
          <i class="el-icon-arrow-right" ></i>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        money: 12.00
      }
    },
    methods: {
      tologin () {
        this.$router.push('/login')
      },
      toDeals () {
        this.$router.push('/dealdetail')
      }
    }
  }
</script>
<style lang="stylus" type="text/stylus" scoped>
  @import '../../common/stylus/mixin.styl'
    .back
      width :100%
      height :40px
      background-color :blue
      line-height :40px
      color :white
      padding-left :10px
      font-size :14px
      i
        margin-right :20px
        font-size :18px
    .money
      width :90%
      margin :10px auto
      height :80px
      border-radius :20px
      background-color :#E6A23C
      box-shadow :1px 1px 3px #8c939d
      text-align :center
      font-size :12px
      color :white
      span
        font-size :26px
        display :inline-block
        margin-top :20px
        color :brown
        margin-bottom :4px
    .detail
      margin-top :20px
      ul
        list-style :none
        li
          height: 40px
          border-bottom :1px solid rgba(7,17,27,.1)
          line-height :40px
          padding-left :10px
          .el-icon-arrow-right
            float: right
            line-height: 40px
            margin-right :10px
</style>
